<template>
  <!-- 计算属性 -->
  <h1 class="d1">{{ msg.split('').reverse().join('') }}</h1>
  <h1 class="d1">{{ reverseMsg }}</h1>

  <input type="text" v-model="msg">
  <h1>{{ msg }}</h1>

</template>

<script>
// 声明式
export default {
  name: 'App',
  data() {
    return {
      msg: 'helloworld',
    }
  },
  computed: {
    reverseMsg() {
      return this.msg.split('').reverse().join('');
    }
  },
  watch: {
    // 监听值的变化
    msg(new_v,old_v) {
      console.log('new_v',new_v)
      console.log('old_v',old_v)
      if(new_v.length < 10){
        alert('值太少')
      }
    }
  }
}
</script>

<style>
.d1 {
  /*width: 100px;*/
  /*height: 100px;*/
  background-color: red;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>